<template>
  <div id="BasicDataManage-map" style="width:100%;"></div>
</template>
<script>
import '@/assets/map/ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import VectorLayer from 'ol/layer/Vector';
import {Vector as VectorSource} from 'ol/source';
import { getProjection,getResolutions,getTiandituVecMap,getTiandituVecText,getTiandituImgMap,getTiandituImgText,
  getRESTLayer,getVectorTileLayer,iServerHttp,meterToDegree } from "@/map/projMap.js";
import {Fill, Stroke, Style, Icon, Circle as CircleStyle,Text} from 'ol/style';
import {boundingExtent} from 'ol/extent';
import WKT from 'ol/format/WKT';
import dingweiImg from '@/assets/map/image/newImage/blueMarker.png';
import {
  GetGridCellInfosParameters,
  GridCellInfosService,
  MapService,
  GetFeaturesByGeometryParameters,FeatureService
} from '@supermap/iclient-ol';

export default {
  name: "BasicDataManage",
  components: {

  },
  props:{
    allRadioIndexData: {//全部序号列表
      type:Array,
      required:true,
      default:[]
    },
    allListData: {//全部查询结果列表
      type:Array,
      required:true,
      default:[]
    },
    typeCodeDataList: {//选择图层的版本号数据列表
      type:Array,
      required:true,
      default:[]
    },
    resetClearAllBool: {//是否重置清空全部图层数组
      type:Boolean,
      required:false,
      default:false
    },
    dataTypeInfoArray:{//图层数据类型数组
      type: Array,
      required:false,
      default: []
    },
  },
  emits:["getDetailDataById","getLegendHtml"],
  data() {
    return {
      str: "BasicDataManage",
      map: null,
      center: [105, 34],
      zoom: 4,
      layer1:null,//天地图街道图
      layer2:null,
      taskDataLayer: null,
      allRadioIndexList: [],
      allBaseVectorLayerArray:[],//全部图层数组列表
      //超图图层服务使用数据
      selectLayerIndex:null,//选中图层的序号
      allRestVectorLayerArray:[],//全部超图图层数组
      allDataList:[],//全部查询结果数组
      typeCodeDataArray:[],//选择图层的版本号数据列表
    }
  },
  watch: {
    allRadioIndexData: {//全部序号列表
      handler: function(newVal,oldVal){
        if(newVal!=oldVal){
          this.allRadioIndexList = newVal;
          //根据全部序号列表设置全部查询图层数组
          this.addAllBaseVectorLayerArray();
          //根据全部序号列表设置全部超图图层数组
          this.addAllRestVectorLayerArray();
        }
      },
      immediate:true
    },
    allListData: {
      handler: function(newVal,oldVal){
        this.allDataList = newVal;
        if(newVal!=oldVal){
          this.showAllListData();
        }
      },
      immediate:true
    },
    typeCodeDataList: {//选择图层的版本号数据列表
      handler: function(newVal,oldVal){
        if(newVal!=oldVal){
          this.typeCodeDataArray = newVal;
          console.log("typeCodeDataList");
          console.log(newVal);
        }
      },
      immediate:true
    },
    resetClearAllBool: {//是否重置清空全部图层数组
      handler: function(newVal,oldVal){
        // alert(newVal)
        if(newVal==true){
          //重置清空全部图层数组
          this.resetClearAllEvent();
          //重置清空全部超图图层数组
          this.resetClearAllRestLayerEvent();
        }
      },
      immediate:true
    },
    dataTypeInfoArray:{//图层数据类型数组
      handler: function(newVal,oldVal){
        if(newVal!=oldVal){

        }
      },
      immediate:true
    },
  },
  mounted() {
    console.log("mounted");
    let that = this;
    //地图异步加载
    this.$nextTick(function(){
      console.log('地图异步加载');
      //地图异步加载
      setTimeout(() => {
        //初始化地图信息
        that.initMap();
        //地图显示全部查询结果
        // that.showAllListData();
      }, 200);
    });
  },
  methods: {
    initMap() {
      let that = this;
      let mapStr = this.str;
      let targetMap = document.getElementById(mapStr+"-map");
      if(targetMap.innerHTML!=""){
        console.log("清空targetMap");
      }
      targetMap.innerHTML = "";//清空
      //自动获取地图div高度
      this.autodivheight();
      //浏览器窗口发生变化时同时变化DIV高度
      window.onresize=this.autodivheight;
      if(this.map){//避免重复加载地图
        console.log("避免重复加载地图");
        return;
      }
      console.log("初始化地图");
      //获取投影4490坐标系
      this.projection4490 = getProjection();
      //初始化地图信息
      this.map = new Map({
        target: targetMap.id,
        /*controls: defaultControls({attributionOptions: {collapsed: false}})
            .extend([new Logo()]),*/
        view: new View({
          center: this.center,
          maxZoom: 18,
          minZoom: 4,
          zoom: this.zoom,
          constrainResolution:true,//缩放地图可移动到最近的缩放级别（整数zoom级别）
          projection: 'EPSG:4490',
          // resolutions:getResolutions()
        })
      });
      //添加天地图图层
      this.layer1 = getTiandituVecMap();//fxpc天地图街道影像底图
      this.map.addLayer(this.layer1);
      this.layer2 = getTiandituVecText();//fxpc天地图街道地图注记
      this.map.addLayer(this.layer2);
      this.layer1.setZIndex(0);
      this.layer2.setZIndex(0);
      //任务空间数据图层
      this.taskDataLayer = new VectorLayer({
        source: new VectorSource({
          wrapX: false
        }),
        projection: 'EPSG:4490'
      });
      this.map.addLayer(this.taskDataLayer);
      this.taskDataLayer.setZIndex(1);
    },
    //根据全部序号列表设置全部查询图层数组
    addAllBaseVectorLayerArray(){
      let allLayerArray = [];
      if(this.allRadioIndexList!=null && this.allRadioIndexList.length>0){
        for(let i=0;i<this.allRadioIndexList.length;i++){
          allLayerArray.push([]);
        }
      }
      this.allBaseVectorLayerArray = allLayerArray;
    },
    addAllRestVectorLayerArray(){//全部超图图层数组
      let allLayerArray = [];
      if(this.allRadioIndexList!=null && this.allRadioIndexList.length>0){
        for(let i=0;i<this.allRadioIndexList.length;i++){
          allLayerArray.push([]);
        }
      }
      this.allRestVectorLayerArray = allLayerArray;
    },
    //地图显示全部查询结果
    showAllListData(){
      let allDataList = this.allDataList;
      if(allDataList!=null && allDataList.length==4){
        console.log("地图显示全部查询结果");
        let radioLabel = allDataList[0];
        let versionCode = allDataList[1];
        let resultList = allDataList[2];
        let bool = allDataList[3];//添加、移除版本号图层
        //根据图层序号和版本号设置图层数组并获取当前版本号图层
        let selectLayer = this.setBaseVectorLayer(radioLabel,versionCode,bool);
        if(selectLayer!=null){
          if(resultList!=null && resultList.length>0){
            //获取三级数据类别（数据表）code
            let typeCode = this.getDictItemCode(radioLabel);
            this.showDataList(typeCode,selectLayer,versionCode,resultList);//显示查询图层数据
          }else{
            //清空图层上的所有要素
            //selectLayer.getSource().clear();
          }
        }
        //超图图层
        //根据图层序号和版本号设置超图图层数组并获取当前版本号图层
        let selectRestLayer = this.setRestVectorLayer(radioLabel,versionCode,bool);
        if(selectRestLayer!=null){
          let params = {
            radioLabel:radioLabel,
            versionCode:versionCode,
            show:bool,
            sqlText:selectRestLayer.sqlText
            // sqlText:""
          }
          //根据查询图层信息参数查询并显示图层
          this.queryLayersByParams(params);
        }
      }
    },
    //重置清空全部图层数组
    resetClearAllEvent(){
      console.log("重置清空全部图层数组");
      let list = this.allBaseVectorLayerArray;
      if(list!=null && list.length>0){
        for(let i=0;i<list.length;i++) {
          let selectLayerArray = this.allBaseVectorLayerArray[i];
          if(selectLayerArray!=null && selectLayerArray.length>0){
            for(let j=0;j<selectLayerArray.length;j++){
              //清空图层上的所有要素
              this.allBaseVectorLayerArray[i][j].getSource().clear();
              //移除图层
              this.map.removeLayer(this.allBaseVectorLayerArray[i][j]);
            }
          }
          //清空图层数组
          this.allBaseVectorLayerArray[i] = [];
        }
      }
    },
    //重置清空全部超图图层数组
    resetClearAllRestLayerEvent(){
      console.log("重置清空全部超图图层数组");
      let list = this.allRestVectorLayerArray;
      if(list!=null && list.length>0){
        for(let i=0;i<list.length;i++) {
          let selectLayerArray = this.allRestVectorLayerArray[i];
          if(selectLayerArray!=null && selectLayerArray.length>0){
            for(let j=0;j<selectLayerArray.length;j++){
              if(this.allRestVectorLayerArray[i][j]){
                if (this.allRestVectorLayerArray[i][j].vectorTileLayer != null) {//REST矢量切片图层
                  //移除图层
                  this.map.removeLayer(this.allRestVectorLayerArray[i][j].vectorTileLayer);
                  this.allRestVectorLayerArray[i][j].vectorTileLayer = null;
                  this.allRestVectorLayerArray[i][j].vectorTileStyles = null;
                }
                if(this.allRestVectorLayerArray[i][j].restTileLayer!=null){//REST瓦片图层
                  //移除图层
                  this.map.removeLayer(this.allRestVectorLayerArray[i][j].restTileLayer);
                  this.allRestVectorLayerArray[i][j].restTileLayer = null;
                }
              }
            }
          }
          //清空图层数组
          this.allRestVectorLayerArray[i] = [];
        }
      }
    },
    //获取三级数据类别（数据表）code
    getDictItemCode(radioLabel){
      let typeCode = null;
      let list = this.typeCodeDataArray;
      if(list!=null && list.length>0) {
        for (let i = 0; i < list.length; i++) {
          if (list[i].radioLabel==radioLabel) {
            typeCode = list[i].dictItemCode;
            break;
          }
        }
      }

      return typeCode;
    },
    //根据图层序号和版本号设置超图图层数组
    setRestVectorLayer(radioLabel,versionCode,bool){
      let selectLayer = null;
      //根据图层序号获取图层数组序号
      let iIndex = this.getRestLayerIndex(radioLabel);
      //根据图层序号和版本号获取图层序号
      let indexArray = this.getRestVectorLayerIndexArray(radioLabel,versionCode);
      let jIndex = null;
      if(indexArray!=null && indexArray.length==2){
        iIndex = indexArray[0];
        jIndex = indexArray[1];
        selectLayer = this.allRestVectorLayerArray[iIndex][jIndex];
      }
      console.log("iIndex"+iIndex+",jIndex"+jIndex);
      if(bool){//添加超图图层
        if(selectLayer!=null){
          console.log("已有超图图层"+versionCode);
          return selectLayer;
        }
        console.log("创建超图图层"+versionCode);
        //创建超图图层
        if(radioLabel && this.typeCodeDataArray!=null && this.typeCodeDataArray.length>0){
          for(let j = 0;j < this.typeCodeDataArray.length;j++) {
            for(let i=0;i<this.typeCodeDataArray[j].length;i++){
              if(this.typeCodeDataArray[j][i].radioLabel==radioLabel){
                let code = this.typeCodeDataArray[j][i].dictItemCode;
                let name = this.typeCodeDataArray[j][i].name;
                let sqlText = "data_version like '%"+versionCode+"%'";//查询临时图层
                selectLayer = {
                  code:code,//图层类型code
                  name:name,//图层名称
                  vectorTileLayer:null,//REST矢量切片图层
                  restTileLayer:null,//REST瓦片图层
                  sqlText:sqlText,//查询条件
                  tempLayerId:null,//临时图层ID
                  vectorTileStyles:null,//矢量切片样式
                  versionCode:versionCode,//版本号
                  radioLabel: radioLabel,//字典序号
                };
                break;
              }
            }
          }
        }
        //添加超图图层数组
        this.allRestVectorLayerArray[iIndex].push(selectLayer);
        console.log("this.allRestVectorLayerArray--add");
        console.log(this.allRestVectorLayerArray);
      }else{//移除超图图层
        //根据版本号清除超图图层要素
        this.removeRestLayerDataByTypeCode(iIndex,jIndex);
      }

      return selectLayer;
    },
    //根据图层序号和版本号获取图层序号
    getRestVectorLayerIndexArray(radioLabel,versionCode){
      let indexArray = [];
      if(radioLabel && versionCode && this.allRestVectorLayerArray!=null && this.allRestVectorLayerArray.length>0) {
        for(let i=0;i<this.allRestVectorLayerArray.length;i++){
          if(this.allRadioIndexList[i]==radioLabel){
            for(let j=0;j<this.allRestVectorLayerArray[i].length;j++){
              if(this.allRestVectorLayerArray[i][j].versionCode==versionCode){
                indexArray = [i,j];
              }
            }
            break;
          }
        }
      }

      return indexArray;
    },
    //根据图层序号获取图层数组序号
    getRestLayerIndex(radioLabel){
      let index = null;
      if(radioLabel && this.allRestVectorLayerArray!=null && this.allRestVectorLayerArray.length>0) {
        for(let i=0;i<this.allRestVectorLayerArray.length;i++){
          if(this.allRadioIndexList[i]==radioLabel){
            index = i;
            break;
          }
        }
      }

      return index;
    },
    //根据版本号清除超图图层要素
    removeRestLayerDataByTypeCode(iIndex,jIndex){
      if(iIndex!=null && jIndex!=null){
        //图层名称
        let realName = this.allRestVectorLayerArray[iIndex][jIndex].name;
        //移除图层
        if(this.allRestVectorLayerArray[iIndex][jIndex].vectorTileLayer!=null){//REST矢量切片图层
          //移除图层
          this.map.removeLayer(this.allRestVectorLayerArray[iIndex][jIndex].vectorTileLayer);
          this.allRestVectorLayerArray[iIndex][jIndex].vectorTileLayer = null;
          this.allRestVectorLayerArray[iIndex][jIndex].vectorTileStyles = null;
        }
        if(this.allRestVectorLayerArray[iIndex][jIndex].restTileLayer!=null){//REST瓦片图层
          let layers = this.map.getLayers()
          // let index = -1
          // for(let i=0;i<layers.array_.length;i++){
          //   if (layers.array_[i].values_.source.options) {
          //     if (value.data.url == layers.array_[i].values_.source.options.url) {
          //       index = i
          //     }
          //   }	
          // }
          this.map.removeLayer(layers.array_[4])
          //移除图层
          this.map.removeLayer(this.allRestVectorLayerArray[iIndex][jIndex].restTileLayer);
          this.allRestVectorLayerArray[iIndex][jIndex].restTileLayer = null;
        }
        //图层数组移除图层
        this.allRestVectorLayerArray[iIndex].splice(jIndex,1);
        //判断是否此数据类型的版本号超图图层数组为空
        if(this.allRestVectorLayerArray[iIndex].length==0){
          //清空图例
          this.$emit("getLegendHtml",{name:realName,legendHtml:"",show:false});
        }
        console.log("this.allRestVectorLayerArray--remove");
        console.log(this.allRestVectorLayerArray);
      }
    },
    //根据图层序号和版本号设置图层数组
    setBaseVectorLayer(radioLabel,versionCode,bool){
      let selectLayer = null;
      //根据图层序号获取图层数组
      let selectLayerArray = this.getSelectLayerArray(radioLabel);
      //根据版本号获取图层
      selectLayer = this.getSelectLayer(selectLayerArray,versionCode);
      if(bool){//添加图层
        if(selectLayer!=null){
          console.log("已有图层"+versionCode);
          return selectLayer;
        }
        console.log("创建图层"+versionCode);
        //创建图层
        selectLayer = new VectorLayer({
          source: new VectorSource({
            wrapX: false
          }),
          projection: 'EPSG:4490'
        });
        this.map.addLayer(selectLayer);
        selectLayer.setZIndex(4);
        selectLayer.setProperties({
          versionCode:versionCode,
        });
        //添加图层数组
        selectLayerArray.push(selectLayer);
      }else{//移除图层
        //根据版本号清除图层要素
        this.removeLayerDataByTypeCode(selectLayerArray,versionCode);
      }

      return selectLayer;
    },
    //根据版本号清除图层要素
    removeLayerDataByTypeCode(selectLayerArray,versionCode){
      //查找版本号图层
      let index = -1;
      if(selectLayerArray!=null && selectLayerArray.length>0){
        for(let i=0;i<selectLayerArray.length;i++){
          let temp = selectLayerArray[i].getProperties();
          if(temp.versionCode==versionCode){
            index = i;
            break;
          }
        }
      }
      if(index!=-1){
        //清空图层上的所有要素
        selectLayerArray[index].getSource().clear();
        //移除图层
        this.map.removeLayer(selectLayerArray[index]);
        //图层数组移除图层
        selectLayerArray.splice(index,1);
      }
    },
    //根据图层序号获取图层数组
    getSelectLayerArray(radioLabel){
      let selectLayerArray = null;//选择图层
      if(this.allRadioIndexList!=null && this.allRadioIndexList.length>0){
        for(let i=0;i<this.allRadioIndexList.length;i++){
          if(this.allRadioIndexList[i]==radioLabel){
            selectLayerArray = this.allBaseVectorLayerArray[i];
            break;
          }
        }
      }

      return selectLayerArray;
    },
    //根据版本号获取图层
    getSelectLayer(selectLayerArray,versionCode){
      let selectLayer = null;//选择图层
      if(selectLayerArray!=null && selectLayerArray.length>0){
        for(let i=0;i<selectLayerArray.length;i++){
          let temp = selectLayerArray[i].getProperties();
          if(temp.versionCode==versionCode){
            selectLayer = selectLayerArray[i];
            break;
          }
        }
      }

      return selectLayer;
    },
    showDataList(typeCode,selectLayer,versionCode,list){//显示查询图层数据
      console.log("显示查询图层数据"+versionCode);
      if(selectLayer!=null){
        //selectLayer.getSource().clear();//清空
        if(list!=null && list.length>0){
          console.log("length"+list.length);
          //全部经纬度
          let allCoordinates = [];
          for(let i=0;i<list.length;i++){
            let id = this.getDataIdByType(typeCode,list[i]);//根据数据类型解析数据主键ID
            let geomText = list[i].geom;//空间数据wkt
            if(geomText!=null && geomText!=""){
              geomText = geomText.toUpperCase();//转换大写字母
              if(geomText.indexOf("POINT")!=-1 || geomText.indexOf("MULTIPOINT")!=-1 ||
                  geomText.indexOf("LINESTRING")!=-1 || geomText.indexOf("MULTILINESTRING")!=-1 ||
                  geomText.indexOf("POLYGON")!=-1 || geomText.indexOf("MULTIPOLYGON")!=-1) {//矢量数据
                //空间数据
                let featureTmp = new WKT().readFeature(geomText);
                if(geomText.indexOf("POINT")!=-1 || geomText.indexOf("MULTIPOINT")!=-1){//点
                  //样式
                  let style = this.getPointStyle();
                  featureTmp.setStyle(style);
                }else if(geomText.indexOf("LINESTRING")!=-1 || geomText.indexOf("MULTILINESTRING")!=-1){//线
                  //样式
                  let style = this.getLineStringStyle("blue");
                  featureTmp.setStyle(style);
                }else if(geomText.indexOf("POLYGON")!=-1 || geomText.indexOf("MULTIPOLYGON")!=-1){//面
                  //样式
                  let style = this.getPolyonStyle("blue");
                  featureTmp.setStyle(style);
                }
                //设置属性
                featureTmp.setProperties({
                  id:id,//主键ID
                  //versionCode:versionCode,//版本号
                  typeCode:typeCode,//三级数据类别（数据表）code
                });
                //添加矢量数据
                selectLayer.getSource().addFeature(featureTmp);
                //获取范围
                let extent = featureTmp.getGeometry().getExtent();
                if(extent.length==4){
                  //全部经纬度--左下角
                  allCoordinates.push([extent[0],extent[1]]);
                  //全部经纬度--右上角
                  allCoordinates.push([extent[2],extent[3]]);
                }
              }
            }
          }
          this.showBoundingExtent(allCoordinates);//缩放到区域位置
        }
      }
    },
    showBoundingExtent(coordinates){//缩放到区域位置
      //console.log("缩放到区域位置");
      if (coordinates!=null && coordinates.length > 1) {
        const extent = boundingExtent(coordinates);
        //this.map.getView().fit(extent, {duration: 1000, padding: [50, 50, 50, 50]});
        this.map.getView().fit(extent, {padding: [50, 50, 50, 50]});
        //获取默认位置
        this.center = this.map.getView().getCenter();
        this.zoom = this.map.getView().getZoom();
      }
    },
    getDataIdByType(typeCode,data){//根据数据类型解析数据主键ID
      let id = "";
      if(typeCode=="sjxzq"){//省级行政区
        id = data.jbId;
      }else if(typeCode=="djxzq"){//地级行政区
        id = data.jbId;
      }else if(typeCode=="xjxzq"){//县级行政区
        id = data.jbId;
      }else if(typeCode=="xjxzq1"){//乡级行政区
        id = data.jbId;
      }else if(typeCode=="sjxzzx"){//省级行政中心
        id = data.jrpId;
      }else if(typeCode=="djxzzx"){//地级行政中心
        id = data.jrcId;
      }else if(typeCode=="xjxzzx"){//县级行政中心
        id = data.jrcId;
      }else if(typeCode=="xjxzzx1"){//乡级行政中心
        id = data.jrtId;
      }else if(typeCode=="xzcszd"){//行政村所在地
        id = data.jrvId;
      }else if(typeCode=="xjxzzx1"){//乡级行政中心
        id = data.jbId;
      }else if(typeCode=="yg1"){//遥感
        id = data.jrsId;
      }else if(typeCode=="dc"){//断层
        id = data.id;
      }else if(typeCode=="dcyx1"){//地层岩性
        id = data.id;
      }else if(typeCode=="wxxsjpgad"){//危险性数据PGA点
        id = data.id;
      }else if(typeCode=="wxxsjdjd"){//危险性数据等级点
        id = data.id;
      }else if(typeCode=="wxxsjdjm"){//危险性数据等级面
        id = data.id;
      }else if(typeCode=="ls434ysqzml"){//历史4 3/4以上强震目录
        id = data.jscId;
      }else if(typeCode=="1970nylxzml"){//1970年以来小震目录
        id = data.jicId;
      }else if(typeCode=="whqy1"){//危化企业
        id = data.jdeId;
      }else if(typeCode=="jyjqz1"){//加油（加气）站
        id = data.jgsId;
      }else if(typeCode=="wxhxpfswxy"){//危险化学品、放射危险源
        id = data.jdsId;
      }else if(typeCode=="csbncs"){//城市避难场所
        id = data.jesId;
      }else if(typeCode=="wzcbk"){//物资储备库
        id = data.jmrId;
      }else if(typeCode=="dzyjyab"){//地震应急预案表（非空间数据）
        id = data.jepId;
      }else if(typeCode=="jzwgwsj"){//建筑物格网数据
        id = data.jdgggthId;
      }else if(typeCode=="czzz"){//城镇住宅
        id = data.jrcchId;
      }else if(typeCode=="czfzz"){//城镇非住宅
        id = data.jrccnhId;
      }else if(typeCode=="nczzdlzz"){//农村住宅（独立住宅）
        id = data.jrccdhId;
      }else if(typeCode=="nczzjhzz"){//农村住宅（集合住宅）
        id = data.jrccjhId;
      }else if(typeCode=="fzyf"){//辅助用房
        id = data.jrccfhId;
      }else if(typeCode=="ncfzz"){//农村非住宅
        id = data.jrccnhId;
      }else if(typeCode=="dl1"){//道路
        id = data.jlId;
      }else if(typeCode=="ql1"){//桥梁
        id = data.jlbId;
      }else if(typeCode=="jc1"){//机场
        id = data.jaId;
      }else if(typeCode=="xxb"){//学校表
        id = data.jsId;
      }else if(typeCode=="yy1"){//医院
        id = data.jhId;
      }else if(typeCode=="rktjb"){//人口统计表
        id = data.jpId;
      }else if(typeCode=="rkglwgsj"){//人口公里网格数据
        id = data.id;
      }

      return id;
    },
    //根据查询图层信息参数查询并显示图层
    queryLayersByParams(params){
      debugger
      if(params.radioLabel && params.radioLabel!=="" && params.versionCode && params.versionCode!==""){
        //清空全部选择图层要素
        this.clearAllSelectionLayer();
        for(let i=0;i<this.allRestVectorLayerArray.length;i++){
          for(let j=0;j<this.allRestVectorLayerArray[i].length;j++){
            if(this.allRestVectorLayerArray[i][j].radioLabel===params.radioLabel && this.allRestVectorLayerArray[i][j].versionCode===params.versionCode){
              if(this.allRestVectorLayerArray[i][j].vectorTileLayer!=null){//REST矢量切片图层
                //移除图层
                this.map.removeLayer(this.allRestVectorLayerArray[i][j].vectorTileLayer);
                this.allRestVectorLayerArray[i][j].vectorTileLayer = null;
                this.allRestVectorLayerArray[i][j].vectorTileStyles = null;
              }
              if(this.allRestVectorLayerArray[i][j].restTileLayer!=null){//REST瓦片图层
                //移除图层
                this.map.removeLayer(this.allRestVectorLayerArray[i][j].restTileLayer);
                this.allRestVectorLayerArray[i][j].restTileLayer = null;
              }
              //地图服务
              //获取数据类型信息
              let dataTypeInfo = this.getDataTypeInfo(params.radioLabel,"radioLabel");
              debugger;
              let url = dataTypeInfo.url;
              console.log(url);
              //test
              //url = "http://10.13.155.192:8090/iserver/services/map-fxfzypg/rest/maps/district_boundary_province@fxfzypg";

              if(params.show) {//显示图层
                let zIndex = dataTypeInfo.zIndex;
                let sqlText = params.sqlText;
                console.log(sqlText);
                if(sqlText && sqlText!==""){//根据sql条件显示临时图层
                  let layerID = this.allRestVectorLayerArray[i][j].tempLayerId;//临时图层ID
                  if(layerID!=null && layerID!=="") {//指定临时图层ID
                    //更新超图临时图层信息
                    this.getPutTempLayersSet(i,j,url,layerID,zIndex,sqlText);
                  }else{
                    this.createRestMapTempLayersSet(i,j,url,zIndex,sqlText);//查询REST图层信息并创建新的临时图层
                  }
                  //根据url和zIndex、sqlText添加矢量切片图层
                  // this.createVectorTileLayer(i,j,url,zIndex,sqlText);
                }else{//显示整个图层
                  // this.deleteRestMapTempLayersSet(url,null);//删除超图临时图层
                  // url = "http://10.13.155.192:8090/iserver/services/map-fxfzypg/rest/maps/district_boundary_china@fxfzypg";
                  //根据url、临时图层layerID和zIndex添加瓦片地图图层REST
                  this.createMapRestLayer(i,j,url,'',zIndex);
                  //根据url和zIndex添加矢量切片图层
                  // this.createVectorTileLayer(i,j,url,zIndex,null);
                }
              }else{//隐藏图层
                //
              }
              break;
            }
          }
        }
      }
    },
    createRestMapTempLayersSet(iIndex,jIndex,layerUrl,zIndex,sqlText){//查询REST图层信息并创建新的临时图层
      let url = encodeURI(layerUrl +"/layers.rjson");
      let that = this;
      //查询REST图层信息
      let httpRequest = new XMLHttpRequest();//第一步：建立所需的对象
      httpRequest.open('GET', url, true);//第二步：打开连接  将请求参数写在url中
      httpRequest.send();//第三步：发送请求  将请求参数写在URL中
      //获取数据后的处理程序
      httpRequest.onreadystatechange = function () {
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
          let json = httpRequest.responseText;//获取到json字符串，还需解析
          let obj = JSON.parse(json);
          if(obj.length>0){
            if(sqlText!=null && sqlText!=""){
              for(let i=0;i<obj.length;i++){
                let layers = obj[i].subLayers.layers;
                for(let j=0;j<layers.length;j++){
                  layers[j].displayFilter = sqlText;//SQL查询过滤
                }
              }
            }
            that.postTempLayersSet(iIndex,jIndex,layerUrl,zIndex,obj);//创建并获取超图临时图层
          }
        }
      };
    },
    postTempLayersSet(iIndex,jIndex,layerUrl,zIndex,obj){//创建并获取超图临时图层
      let that = this;
      let url = encodeURI(layerUrl+"/tempLayersSet.rjson");
      let entry = JSON.stringify(obj);
      let xhr = new XMLHttpRequest();//第一步：建立所需的对象
      xhr.open("POST", url, true);//第二步：打开连接  将请求参数写在url中
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
      //获取数据后的处理程序
      xhr.onreadystatechange = function(){
        let readyState = xhr.readyState;
        if (readyState == 4){
          let status = xhr.status;
          let responseText =  xhr.responseText ;
          let result = JSON.parse(responseText);
          if(result.succeed){
            let layerID = result.newResourceID;
            let newResourceLocation = result.newResourceLocation;
            //that.$message({ message: '创建临时图层成功!', type: 'success' });
            //查询超图临时图层
            //that.getMapTempLayer(iIndex,jIndex,layerUrl,layerID,zIndex);
            //根据layerUrl、临时图层layerID和zIndex查询并添加瓦片地图图层REST
            that.createMapRestLayer(iIndex,jIndex,layerUrl,layerID,zIndex);
          }else{
            //that.$message({ message: '创建临时图层失败!', type: 'warning' });
          }
          xhr.onreadystatechange = function(){};
          xhr = null;
        }
      };
      xhr.send(entry);//第三步：发送请求  将请求参数写在URL中
    },
    getPutTempLayersSet(iIndex,jIndex,layerUrl,layerID,zIndex,sqlText){//更新超图临时图层信息
      let that = this;
      //查询
      let url = encodeURI(layerUrl+"/tempLayersSet/"+layerID+".rjson");
      //查询
      let httpRequest = new XMLHttpRequest();//第一步：建立所需的对象
      httpRequest.open('GET', url, true);//第二步：打开连接  将请求参数写在url中  ps:"http://localhost:8080/rest/xxx"
      httpRequest.send();//第三步：发送请求  将请求参数写在URL中
      //获取数据后的处理程序
      httpRequest.onreadystatechange = function () {
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
          let json = httpRequest.responseText;//获取到json字符串，还需解析
          let obj = JSON.parse(json);
          if(obj.length>0){
            for(let i=0;i<obj.length;i++){
              let layers = obj[i].subLayers.layers;
              for(let j=0;j<layers.length;j++){
                layers[j].displayFilter = sqlText;//SQL查询过滤
              }
            }
          }
          //更新超图临时图层信息
          that.putTempLayersSet(iIndex,jIndex,url,layerUrl,layerID,zIndex,obj);
        }
      };
    },
    putTempLayersSet(iIndex,jIndex,url,layerUrl,layerID,zIndex,obj){//更新超图临时图层信息，获取临时图层
      let that = this;
      let entry = JSON.stringify(obj);
      let xhr = new XMLHttpRequest();//第一步：建立所需的对象
      xhr.open("PUT", url, true);//第二步：打开连接  将请求参数写在url中
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
      //获取数据后的处理程序
      xhr.onreadystatechange = function(){
        let readyState = xhr.readyState;
        if (readyState == 4){
          let status = xhr.status;
          let responseText =  xhr.responseText ;
          let result = JSON.parse(responseText);
          if(result.succeed){
            //that.$message({ message: '更新临时图层成功!', type: 'success' });
            //查询超图临时图层
            //that.getMapTempLayer(iIndex,jIndex,layerUrl,layerID,zIndex);
            //根据layerUrl、临时图层layerID和zIndex查询并添加瓦片地图图层REST
            that.createMapRestLayer(iIndex,jIndex,layerUrl,layerID,zIndex);
          }else{
            //that.$message({ message: '更新临时图层失败!', type: 'warning' });
          }
          xhr.onreadystatechange = function(){};
          xhr = null;
        }
      };
      xhr.send(entry);//第三步：发送请求  将请求参数写在URL中
    },
    //REST图层查询
    createMapRestLayer(iIndex,jIndex,layerUrl,layerID,zIndex){//根据layerUrl、临时图层layerID和zIndex查询并添加瓦片地图图层REST
      let that = this;
      console.log(iIndex+","+jIndex);
      //瓦片地图图层
      let mapService = new MapService(layerUrl);//根据超图REST图层获取图层信息
      mapService.getMapInfo(function (serviceResult) {
        if(serviceResult.result!=undefined){
          let mapJSONObj = serviceResult.result;
          //获取超图发布的REST图层
          //let options = TileSuperMapRest.optionsFromMapJSON(layerUrl, mapJSONObj);
          let layerName = mapJSONObj.name;//图层名称
          //获取图层范围
          let bounds = mapJSONObj.bounds;
          let left = bounds.left;
          let bottom = bounds.bottom;
          let right = bounds.right;
          let top = bounds.top;
          let origin = [left, top];//左上角
          let extent = [left, bottom, right, top];//图层范围
          //获取超图发布的REST图层（自定义比例尺）
          let layer = getRESTLayer(layerUrl,layerID,origin,extent,mapJSONObj,17);
          //设置图层叠加顺序
          layer.setZIndex(zIndex);
          if(//添加到REST图层数组
          that.allRestVectorLayerArray[iIndex][jIndex].restTileLayer == null) {
            //添加到REST图层数组
            that.allRestVectorLayerArray[iIndex][jIndex].restTileLayer = layer;
            console.log('测试1')
            that.map.addLayer(layer);
          }
          if(layerID && layerID!==""){
            //设置临时图层ID
            that.allRestVectorLayerArray[iIndex][jIndex].tempLayerId = layerID;
          }
          // console.log("extent");
          // console.log(extent);
          //缩放到图层范围
          that.map.getView().fit(extent, {padding: [50, 50, 50, 50]});
          //图层范围
          let bbox = extent.join(",");
          //图层显示名称
          let realName = that.allRestVectorLayerArray[iIndex][jIndex].name;
          //获取图例
          that.getLayerLegend(realName,layerUrl,bbox);//根据url获取图层图例信息
        }
      });
    },
    //获取数据类型信息
    getDataTypeInfo(value,type){
      debugger;
      let dataTypeInfo = null;
      if(value && type && this.dataTypeInfoArray!=null && this.dataTypeInfoArray.length>0){
        for(let i=0;i<this.dataTypeInfoArray.length;i++){
          if(this.dataTypeInfoArray[i].code===value){
            dataTypeInfo = this.dataTypeInfoArray[i];
            break;
          }
        }
      }

      return dataTypeInfo;
    },
    getLayerLegend(realName,layerUrl,bbox){//根据url获取图层图例信息
      let that = this;
      layerUrl += '/legend.json?bbox='+bbox;
      layerUrl += '&returnVisibleOnly=false';//是否只返回当前地图范围内可见要素的图例。默认为 false
      //图层图例信息查询
      let httpRequest = new XMLHttpRequest();//第一步：建立所需的对象
      httpRequest.open('GET', layerUrl, true);//第二步：打开连接  将请求参数写在url中  ps:"http://localhost:8080/rest/xxx"
      httpRequest.send();//第三步：发送请求  将请求参数写在URL中
      /**
       * 获取数据后的处理程序
       */
      httpRequest.onreadystatechange = function () {
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
          let json = httpRequest.responseText;//获取到json字符串，还需解析
          let obj = JSON.parse(json);
          let layerLegends = obj.layerLegends;
          if(layerLegends!=null && layerLegends.length>0){
            let html = '';
            for(let i=0;i<layerLegends.length;i++){
              let layerLegend = layerLegends[i];
              //获取图层名称
              let layerName = layerLegend.layerName;
              let legends = layerLegend.legends;
              if(legends!=null && legends.length>0){
                if(layerName.indexOf("#")!=-1 && legends.length==1){
                  let textImgUrl = iServerHttp() + "/iserver/manager/static/Theme/image/LabelUniform.png";
                  //文字图层不显示图例
                  if(legends[0].url==textImgUrl){
                    continue;
                  }
                }
                if(legends.length>1){//多图例图层
                  html += '<p style="text-align: center;font-weight: bold;">'+realName+'</p>';
                  for(let j=0;j<legends.length;j++){
                    let legend = legends[j];
                    let values = legend.values;
                    if(values==null){
                      continue;
                    }
                    let imageData = legend.imageData;
                    let contentType = legend.contentType;
                    let url = legend.url;
                    let label = legend.label;
                    let width = legend.width;
                    let height = legend.height;
                    let imgSrc = "data:image/jpeg;base64,"+imageData;
                    html += '<p style="height: '+height+'px;">';
                    html += '<img style="width:'+width+'px;height:'+height+'px" src="'+imgSrc+'" />';
                    html += '<span style="position: relative;top: -2px;left: 10px;height: 16px;font-size: 16px;">'+label+'</span>';
                    html += '</p>';
                  }
                }else{//单一图例图层
                  let legend = legends[0];
                  let values = legend.values;
                  let imageData = legend.imageData;
                  let contentType = legend.contentType;
                  let url = legend.url;
                  let label = legend.label;
                  let width = legend.width;
                  let height = legend.height;
                  let imgSrc = "data:image/jpeg;base64,"+imageData;
                  html += '<p style="height: '+height+'px;">';
                  html += '<img style="width:'+width+'px;height:'+height+'px" src="'+imgSrc+'" />';
                  html += '<span style="position: relative;top: -2px;left: 10px;height: 16px;font-size: 16px;">'+realName+'</span>';
                  html += '</p>';
                }
              }
            }
            //图例html
            that.$emit("getLegendHtml",{name:realName,legendHtml:html,show:true});
          }
        }
      };
    },
    //根据url和zIndex、sqlText添加矢量切片图层
    createVectorTileLayer(iIndex,jIndex,layerUrl,zIndex,sqlText) {
      let that = this;
      //layerUrl = "http://10.13.155.192:8090/iserver/services/map-fxfzypg/rest/maps/district_boundary_china@fxfzypg";
      //瓦片地图图层
      let mapService = new MapService(layerUrl);//根据超图矢量瓦片图层获取图层信息
      mapService.getMapInfo(function (serviceResult) {
        if(serviceResult.result!=undefined){
          let mapJSONObj = serviceResult.result;
          //获取超图发布的REST图层
          //let options = TileSuperMapRest.optionsFromMapJSON(newUrl, mapJSONObj);
          let layerName = mapJSONObj.name;//图层名称
          //获取图层范围
          let bounds = mapJSONObj.bounds;
          let left = bounds.left;
          let bottom = bounds.bottom;
          let right = bounds.right;
          let top = bounds.top;
          let origin = [left, top];//左上角
          let extent = [left, bottom, right, top];//图层范围
          //获取超图发布的REST矢量切片图层（自定义比例尺）
          let resultArr = getVectorTileLayer(that.map,layerUrl,origin,extent,that.map.getView(),mapJSONObj,sqlText,0);
          let layer = resultArr[0];
          that.allRestVectorLayerArray[iIndex][jIndex].vectorTileStyles = resultArr[1];//矢量切片样式
          //自定义样式
          // that.allRestVectorLayerArray[iIndex][jIndex].vectorTileStyles.setCustomStyleFuntion(null);
          that.map.addLayer(layer);
          zIndex = zIndex - 1;//test
          //设置图层叠加顺序
          layer.setZIndex(zIndex);
          //添加到REST图层数组
          that.allRestVectorLayerArray[iIndex][jIndex].vectorTileLayer = layer;
          // console.log("extent");
          // console.log(extent);
          //缩放到图层范围
          that.map.getView().fit(extent, {padding: [50, 50, 50, 50]});
          //图层范围
          let bbox = extent.join(",");
          //图层显示名称
          let realName = that.allRestVectorLayerArray[iIndex][jIndex].name;
          //获取图例
          that.getLayerLegend(realName,layerUrl,bbox);//根据url获取图层图例信息
        }
      });
    },
    //清空全部选择图层要素
    clearAllSelectionLayer(){
      if(this.selectLayerIndex && this.selectLayerIndex.length==2){
        let iIndex = this.selectLayerIndex[0];
        let jIndex = this.selectLayerIndex[1];
        if(iIndex && jIndex && this.allRestVectorLayerArray[iIndex][jIndex].vectorTileLayer){
          //矢量切片样式
          if(this.allRestVectorLayerArray[iIndex][jIndex].vectorTileStyles){
            this.allRestVectorLayerArray[iIndex][jIndex].vectorTileStyles.featureSelectedFunction({
              selectedId: null,
              layerName: null,
              fieldId:null
            });
            if(this.allRestVectorLayerArray[iIndex][jIndex].vectorTileLayer){
              this.allRestVectorLayerArray[iIndex][jIndex].vectorTileLayer.changed();
            }
          }
        }
      }
    },
    getPolyonStyle(color){//多边形样式
      let style = new Style({
        fill:new Fill({//填充样式
          color:"rgba(0,0,0,0)"
        }),
        stroke:new Stroke({//描绘
          width:2,//宽
          color:color
        })
      });

      return style;
    },
    getPointStyle(){//点图标样式
      let style = new Style({
        image: new Icon({
          src: dingweiImg,
          anchor: [0.5, 1]
        }),
      });

      return style;
    },
    getLineStringStyle(color){//线样式
      let style = new Style({
        fill:new Fill({//填充样式
          color:"rgba(0,0,0,0)"
        }),
        stroke:new Stroke({//线
          width:2,//宽
          color:color
        })
      });

      return style;
    },
    autodivheight() {//自动获取div高度
      //获取浏览器窗口高度
      let winHeight = 0;
      if (window.innerHeight) {
        winHeight = window.innerHeight;
      } else if ((document.body) && (document.body.clientHeight)) {
        winHeight = document.body.clientHeight;
      }
      //通过深入Document内部对body进行检测，获取浏览器窗口高度
      if (document.documentElement && document.documentElement.clientHeight) {
        winHeight = document.documentElement.clientHeight;
      }
      //全屏时窗口高度:864px,地图div高度:754px
      let tempHeight = 864;
      let mapTempHeight = 754;
      let mapHeight = winHeight - tempHeight + mapTempHeight;
      //最小高度
      if(mapHeight<480){
        mapHeight = 480;
      }
      //设置地图高度
      document.getElementById(this.str+"-map").style.height= mapHeight +"px";
      console.log("窗口高度："+winHeight+"地图高度："+mapHeight);
      //resize事件--刷新地图,确保地图不变形
      if(this.map){
        this.map.updateSize();
        console.log("resize事件--刷新地图,确保地图不变形");
      }
    },
  }
}
</script>